<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .main .balls {
            width: 450px;
            padding: 30px 10px 10px;
            margin-bottom: 20px;
            position: relative;
            border-radius: 4px;
        }
        
        .main .balls:after {
            content: "\20";
            clear: both;
            display: block;
            height: 0;
            overflow: hidden;
        }
        
        .main .balls span {
            position: absolute;
            left: 12px;
            top: 5px;
            font-size: 13px;
        }
        
        .main b {
            float: left;
            width: 30px;
            height: 30px;
            font-size: 15px;
            background: #fff;
            border: 1px solid;
            border-radius: 50%;
            line-height: 30px;
            text-align: center;
            margin-right: 8px;
            margin-bottom: 8px;
            cursor: pointer;
        }
        
        .main .red .active {
            background: #f56c6c;
            color: #fff;
        }
        
        .main .blue .active {
            background: #3a8ee6;
            color: #fff;
        }
        
        .main .red {
            background: #feeff0;
        }
        
        .main .red span {
            border-color: #f56c6c;
        }
        
        .main .blue {
            background: #ecf8ff;
        }
        
        .main .blue span {
            border-color: #3a8ee6;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="balls red">
            <span>红球</span>
            <div class="balls-wp">

            </div>
        </div>
        <div class="balls blue">
            <span>蓝球</span>
            <div class="balls-wp">

            </div>
        </div>
        <button onclick="randomFn()">切换</button>
    </div>
</body>
<script>
    randomFn()

    function randomFn() {
        let arr1 = []
        let arr2 = []
        for (let i = 1; i <= 33; i++) {
            if (i < 10) {
                i = String(i).padStart(2, "0")

            }
            //给不到10的字符串补0
            arr1.push(i)
        }
        for (let i = 1; i <= 16; i++) {
            if (i < 10) i = String(i).padStart(2, "0")
            arr2.push(i)
        }
        //生成两个数组 用数据驱动

        var res = [];
        while (res.length < 5) {
            let num = Math.floor(Math.random() * 33);
            if (res.indexOf(arr1[num]) == -1) {
                res.push(arr1[num]);
            }
        }
        //选出来五个随机的

        let deRes = arr1.filter(i => {
                return res.indexOf(i) == -1
            })
            //把剩余的28个过滤出来

        let filRes = [...res.sort(), ...deRes]
            //拿到红色数据 提出来五个并且把提出来的排序
        console.log(filRes);


        var num2 = arr2[Math.floor(Math.random() * 16)];
        let deResBlue = arr2.filter(i => {
            return i != num2
        })
        let filResBlue = [num2, ...deResBlue]
            //拿到蓝色


        console.log(filRes, filResBlue);

        var reds = document.querySelector(".red .balls-wp ");
        var blues = document.querySelector(".blue .balls-wp ");

        reds.innerHTML = ""
        blues.innerHTML = ""
        for (let i = 0; i < filRes.length; i++) {
            let nodes = document.createElement("span")
            nodes.innerHTML = filRes[i];
            if (i < 5) {
                nodes.style.background = "red"
            }
            reds.appendChild(nodes)
        }

        for (let i = 0; i < filResBlue.length; i++) {
            let nodes = document.createElement("span")
            nodes.innerHTML = filResBlue[i];
            if (i < 1) {
                nodes.style.background = "blue"
            }
            blues.appendChild(nodes)
        }
        //拿到的数据渲染dom


    }
</script>

</html>

</html>